@extends('layout.master')
@section('content')
    <div class="right_col" role="main">
        <div class="">
            {{-- <div class="page-title">
                <div class="title_left">
                    <h3>Staff <small>List</small></h3>
                </div>
            </div> --}}

            <div class="clearfix"></div>
            @include('alerts')
            <div class="row" style="display: block;">
                <div class="col-md-12 col-sm-12 ">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Vehicle <small>List</small></h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a href="{{ route('admin.vehicle.create') }}" class="addBtn"><i class="fa fa-plus"></i>
                                        Add</a>
                                </li>

                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="row mb-3">
                                        <div class="col-md-2">
                                            <label for="vehicleTypeFilter" class="form-label">Vehicle Type</label>
                                            <select id="vehicleTypeFilter" class="form-control">
                                                <option value="">All</option>
                                                @foreach (\App\Models\VehicleType::all() as $type)
                                                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-2">
                                            <label for="statusFilter" class="form-label">Status</label>
                                            <select id="statusFilter" class="form-control">
                                                <option value="">All</option>
                                                <option value="active">Active</option>
                                                <option value="inactive">Inactive</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label for="isVerifiedFilter" class="form-label">Verified</label>
                                            <select id="isVerifiedFilter" class="form-control">
                                                <option value="">All</option>
                                                <option value="1">Yes</option>
                                                <option value="0">No</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="card-box table-responsive">

                                        {{ $dataTable->table() }}

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}

    <script>
        $('#vehicleTypeFilter, #statusFilter, #isVerifiedFilter').change(function() {
            $('#vehicle-table').DataTable().ajax.reload();
        });
        $(document).ready(function() {
            $(document).on('click', '.delete', function() {
                var url = $(this).data('url');
                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            method: 'DELETE',
                            url: url,
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                if (response.status) {
                                    Swal.fire({
                                        title: "Deleted!",
                                        text: response.message,
                                        icon: "success"
                                    });
                                    $('#vehicle-table').DataTable().ajax.reload();
                                } else {
                                    Swal.fire({
                                        title: "Error",
                                        text: response.message,
                                        icon: "error"
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                console.log(xhr.responseText);
                                Swal.fire({
                                    title: "Error",
                                    text: "An error occurred. Please try again later.",
                                    icon: "error"
                                });
                            }
                        });
                    }
                });
            });
        });
        $('#vehicle-table').on('draw.dt', function() {
            $('.dt-switch').each(function() {
                if (!$(this).next().hasClass('switchery')) {
                    new Switchery(this, {
                        size: 'small',
                        color: '#26B99A'
                    });
                }
            });
        });
        $(document).on('change', '.vehicle-status', function() {
            let vehicleId = $(this).data('id');
            let status = $(this).prop('checked') ? 'active' : 'inactive';

            $.ajax({
                url: '/admin/vehicle/update-status/' + vehicleId,
                type: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    status: status
                },
                success: function(res) {
                    if (res.success) {
                        toastr.success(res.message);
                    } else {
                        toastr.error('Failed to update status');
                    }
                },
                error: function() {
                    toastr.error('Something went wrong!');
                }
            });
        });
    </script>
@endpush